const projection = ol.proj.get("EPSG:3857");
const TDTImgLayer = new ol.layer.Tile({
    title: "天地图矢量图层",
    source: new ol.source.XYZ({
        url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620",
    }),
});
const TDTImgCvaLayer = new ol.layer.Tile({
    title: "天地图注记图层",
    source: new ol.source.XYZ({
        url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620",
    }),
});
const map = new ol.Map({
    target: "map",
    loadTilesWhileInteracting: true,
    view: new ol.View({
        center: [11430576, 3030575],
        zoom: 5,
        worldsWrap: true,
        minZoom: 1,
        maxZoom: 20,
        projection: projection,
    }),
    // 鼠标控件：鼠标在地图上移动时显示坐标信息。
    controls: ol.control.defaults.defaults({
        zoom: false,
        attribution: false,
        rotate: false
    })
});
map.on('click', evt => {
    console.log("获取地图坐标：", evt.coordinate)
})
// 地图视图初始参数
const view = map.getView();
const zoom = view.getZoom();
const center = view.getCenter();
const rotation = view.getRotation();
/**
 *矢量几何要素的样式
 */
const image = new ol.style.Circle({
    radius: 5,
    fill: null,
    stroke: new ol.style.Stroke({color: "red", width: 1}),
});
const styles = {
    Point: [
        new ol.style.Style({
            //点样式
            image: image,
        }),
    ],
    LineString: [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                //线的边界样式
                color: "green",
                width: 1,
            }),
        }),
    ],
    MultiLineString: [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                //多线的边界样式
                color: "green",
                width: 1,
            }),
        }),
    ],
    MultiPoint: [
        new ol.style.Style({
            //多点的点样式
            image: image,
        }),
    ],
    MultiPolygon: [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                //多区的边界样式
                color: "green",
                width: 1,
            }),
            fill: new ol.style.Fill({
                //多区的填充样式
                color: "rgba(255, 255, 0, 0.5)",
            }),
        }),
    ],
    Polygon: [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                //区的边界样式
                color: "blue",
                lineDash: [4],
                width: 3,
            }),
            fill: new ol.style.Fill({
                //区的填充样式
                color: "rgba(0, 0, 255, 0.1)",
            }),
        }),
    ],
    GeometryCollection: [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                //集合要素的边界样式
                color: "magenta",
                width: 2,
            }),
            fill: new ol.style.Fill({
                //集合要素的填充样式
                color: "magenta",
            }),
            image: new ol.style.Circle({
                //集合要素的点样式
                radius: 10,
                fill: null,
                stroke: new ol.style.Stroke({
                    color: "magenta",
                }),
            }),
        }),
    ],
    Circle: [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                //圆的边界样式
                color: "red",
                width: 2,
            }),
            fill: new ol.style.Fill({
                //圆的填充样式
                color: "rgba(255,0,0,0.2)",
            }),
        }),
    ],
};
const styleFunction = function (feature, resolution) {
    // 根据要素类型设置几何要素的样式
    return styles[feature.getGeometry().getType()];
};

// 加载天地图地图图层
function loadTdtMapLayer() {
    map.addLayer(TDTImgLayer)
    map.addLayer(TDTImgCvaLayer)
}

function log(obj) {
    console.log(obj)
}

// 增加geojson到地图
// https://blog.csdn.net/weixin_43411214/article/details/141281435
function addGeoJSON2Map(data, map) {
    for (let i = 0; i < data.features.length; i++) {
        let vs = new ol.source.Vector({
            features: (new ol.format.GeoJSON()).readFeatures(data.features[i])
        });
        var features = vs.getFeatures();
        for (var j = 0; j < features.length; j++) {
            var feature = features[j];
            var geom = feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
            feature.setGeometry(geom);
        }
        var vectorLayer = new ol.layer.Vector({
            source: vs,
            style: styleFunction
        });
        vectorLayer.set("id", "zipshp" + i);
        map.addLayer(vectorLayer);
    }
    //地图跳转范围
    map.getView().setCenter([14390554.120160533, 5948189.706537744]);
    map.getView().setZoom(6);
}